<template>
  <div class="zone-layout">
    <div class="mw-row-style" style="height:0.82rem;align-items: center">
      <div class="mw-column-center-style" style="width:0.83rem;height:100%;position: relative;justify-content: center;">
        <img src="/static/resou_enter_left.png" style="width:0.53rem;height:0.71rem;position: absolute;left:0;bottom:0;object-fit: cover;"/>
        <div class="mw-column-center-style" style="width:100%;height:100%;justify-content:center;z-index: 1">
          <img src="/static/resou_enter_title.png" style="width:0.5rem;height:0.22rem;object-fit: cover;margin-bottom:0.04rem;"/>
          <div class="mw-second-text-color" style="font-size: 0.1rem;line-height: 0.14rem;">根据微博热</div>
          <div class="mw-second-text-color" style="font-size: 0.1rem;line-height: 0.14rem;">搜推荐商品</div>
        </div>
      </div>
      <div class="mw-vertical-divider" style="height:100%"></div>
      <div class="mw-row-spacebetween-style" style="width:2.62rem;align-items: center;height:100%">

          <swiper  :options="swiperOption" ref="mySwiper" style="width:2.1rem;padding-left:0.1rem;height:100%">
            <swiper-slide>
              <div class="mw-column-style" style="height:100%;justify-content: center" >
                <div @click="sendSkipToArticle(item.article_id)" class="mw-row-style" style="align-items: center;margin-bottom:0.04rem;" v-for="(item,index) in resouesfirst" :key="index">
                  <img  style="margin-right:0.1rem;width:0.05rem;height:0.07rem;object-fit:cover;" src="/static/resou_enter_fire.png"></img>
                  <div class="mw-single-line mw-first-text-color" style="width:1.9rem;font-size: 0.13rem;line-height: 0.18rem">{{item.name}}</div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="mw-column-style" style="height:100%;justify-content: center" >
                <div @click="sendSkipToArticle(item.article_id)" class="mw-row-style" style="align-items: center;margin-bottom:0.04rem;" v-for="(item,index) in resouessecond" :key="index">
                  <img  style="margin-right:0.1rem;width:0.05rem;height:0.07rem;object-fit:cover;" src="/static/resou_enter_fire.png"></img>
                  <div class="mw-single-line mw-first-text-color" style="width:1.9rem;font-size: 0.13rem;line-height: 0.18rem">{{item.name}}</div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="mw-column-style" style="height:100%;justify-content: center" >
                <div @click="sendSkipToArticle(item.article_id)" class="mw-row-style" style="align-items: center;margin-bottom:0.04rem;" v-for="(item,index) in resouesthird" :key="index">
                  <img  style="margin-right:0.1rem;width:0.05rem;height:0.07rem;object-fit:cover;" src="/static/resou_enter_fire.png"></img>
                  <div class="mw-single-line mw-first-text-color" style="width:1.9rem;font-size: 0.13rem;line-height: 0.18rem">{{item.name}}</div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        <div @click="sendSkipToResouList"  class="mw-row-style" style="align-items: center">
          <div class="mw-third-text-color" style="font-size: 0.11rem;margin-right:0.04rem;">全部</div>
          <img src="/static/resou_enter_more.png" style="width:0.04rem;height:0.08rem;object-fit: cover;margin-right:0.1rem;" />
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  import utils from '../utils'
  import httputil from '../httputil'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  var vm = null;
  export default {
    props: ['resouesfirst','resouessecond','resouesthird'],
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop: true,
          direction:'vertical',
          autoplay:{   delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: false },
          on:{
            click: function(e){
//              debugger
//              utils.skipFilter(vm.data.bannerlist[this.realIndex].link,vm)
            },
          },
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    created() {
      vm = this
    },

    methods: {
      sendSkipToArticle(item){
        this.$emit('receiveSkipToArticle',item)
      },
      sendSkipToResouList() {
        this.$emit('receiveSkipToResouList')
      }
    }
  }

</script>
<style>

</style>
